<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jCarousel</title>
<style>
.carousel {
position:relative;
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}

.carousel ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

.carousel ul li{
float: left; /* important for inline positioning of the list items */
width:200px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin:10px 5px;
}
a img {border:none;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jCarousel.js"></script>
<script>
$(document).ready(function(){

	$(".carousel").jCarousel();

});
</script>
</head>

<body>
<div class="carousel">
    <ul>
        <li><a href='#'><img src='item1.png' /></a></li>
        <li><a href='#'><img src='item2.png' /></a></li>
        <li><a href='#'><img src='item3.png' /></a></li>
        <li><a href='#'><img src='item4.png' /></a></li>
        <li><a href='#'><img src='item5.png' /></a></li>
    </ul>
</div><!-- carousel -->
<a href="#" class="prev">Previous</a>	|	<a href="#" class="next">Next</a>
</body>
</html>
